 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--禁止用户在手机上缩放-->
    <title></title>

    <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
    <link rel="stylesheet" href="__AOS__/css/font-awesome.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="__JS__/html5shiv.min.js"></script>
    <script src="__JS__/response.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="__CSS__/personal_center.css">

    <!--省市区三级联动js代码-->
    <script src="__JS__/area.js"></script>
    <style type="text/css">

        .fileInputContainer{
            height: 60px;;
            position:relative;
            width: 60px;
            background-size: 100% 100%;
            display: inline-block;
            background-repeat:no-repeat;
            border: 1px red solid;
            border-radius: 30px;
        }
        .fileInput{
            height:60px;
            width: 60px;
            position:absolute;
            left:0;
            top: 1rem;;
            opacity: 0;
            filter:alpha(opacity=0);
            cursor:pointer;
        }
    </style>
</head>
<body>
<!--响应式导航-->
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-10 clo-lg-10">
            <div class="row personal1 ">
                <div class="col-xs-6 col-sm-6 col-md-11 clo-lg-11 personal1_1">
                    个人信息
                </div>
                <div class="col-xs-6 col-sm-6 col-md-1 clo-lg-1">
                    <a href="" data-toggle="modal" data-target="#exampleModal2">
                        <i class="fa fa-eyedropper"></i>
                        编辑
                    </a>
                </div>
            </div>
            <div class="row personal1_2">
                <div class="col-xs-3 col-sm-3 col-md-2 clo-lg-2 personal1_21">
                    昵称
                </div>
                <div class="col-xs-8 col-sm-8 col-md-9 clo-lg-9 personal1_22">
                    {$a.username}
                </div>
            </div>
            <div class="row personal1_2">
                <div class="col-xs-3 col-sm-3 col-md-2 clo-lg-2 personal1_21">
                    职业
                </div>
                <div class="col-xs-8 col-sm-8 col-md-9 clo-lg-9 personal1_22">
                 {$a.profession}
                </div>
            </div>

            <div class="row personal1_2">
                <div class="col-xs-3 col-sm-3 col-md-2 clo-lg-2 personal1_21">
                  城市
                </div>
                <div class="col-xs-8 col-sm-8 col-md-9 clo-lg-9 personal1_22">
                    {$a.city}
                </div>
            </div>
            <div class="row personal1_2">
                <div class="col-xs-3 col-sm-3 col-md-2 clo-lg-2 personal1_21">
                   性别
                </div>
                <div class="col-xs-8 col-sm-8 col-md-9 clo-lg-9 personal1_22">
                    {$a.gender}
                </div>
            </div>
            <div class="row personal1_2">
                <div class="col-xs-3 col-sm-3 col-md-2 clo-lg-2 personal1_21">
                    签名
                </div>
                <div class="col-xs-8 col-sm-8 col-md-9 clo-lg-9 personal1_22">
                    {$a.motto}
                </div>
            </div>

        </div>
    </div>


    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog"   aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">个人信息编辑</h4>
                </div>
                <div class="modal-body">
                    <form action="{:url('personal/personal_message')}?id={$a.id}" method="post" enctype="multipart/form-data">
                                    <div class="row" style="line-height: 40px">
                                        <img class="fileInputContainer"  id="xmTanImg" src='__IMAGES__/{$a.head_img}'>
                                            <input class="fileInput" id="files"  type="file" name="files"  />
                                    </div>
                <div class="form-group">
                            <label for="recipient-name1" class="control-label">昵称</label>
                            <input type="text" class="form-control" id="recipient-name1"  name="user_name" value="{$a.username}">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name2" class="control-label ">职业</label>
                            <input type="text" class="form-control" id="recipient-name2" name="profession" value="{$a.profession}">
                        </div>
                        <div class="form-group">
                            <label class="control-label">城市</label>
                            <br>
                            <select id="s_province" name="province"></select> 

                            <select id="s_city" name="city" ></select> 
                             
                            <select id="s_county" name="county"></select>
                            <!--初始化下拉列表-->
                            <script type="text/javascript">_init_area();</script>
                        </div>
                        <div class="form-group">
                            <label  class="control-label">性别</label>
                            {switch name=$a.gender}
                            {case value="男"}
                            男<input type="radio"  name="gender" value="男" checked>
                            女 <input type="radio"  name="gender" value="女">
                            人妖 <input type="radio" name="gender" value="人妖">
                            {/case}
                            {case value="女"}
                            男<input type="radio"  name="gender" value="男" >
                            女 <input type="radio"  name="gender" value="女" checked >
                            人妖 <input type="radio" name="gender" value="人妖">
                            {/case}
                            {case value="人妖"}
                            男<input type="radio"  name="gender" value="男" >
                            女 <input type="radio"  name="gender" value="女"  >
                            人妖 <input type="radio" name="gender" value="人妖" checked>
                            {/case}
                            {default/}
                            男<input type="radio"  name="gender" value="男" checked>
                            女 <input type="radio"  name="gender" value="女">
                            人妖 <input type="radio" name="gender" value="人妖">
                            {/switch}

                        </div>
                        <div class="form-group">
                            <label for="recipient-name3" class="control-label">签名</label>
                            <input type="text" class="form-control" id="recipient-name3" name="motto" value=" {$a.motto}">
                        </div>
                        <div class="modal-footer">
                            <input type="submit" value="确定"  onclick="javascript:setTimeout(parent.location.reload(),1000) " class="btn btn-default" >  <!--点击关闭的按钮类-->
                            <input type="reset"  value="取消" class="btn btn-primary" data-dismiss="modal">   <!--重置按钮-->
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>


</div>





<div class="container-fluid last hidden-xs hidden-sm hidden-md">
    <!--隐藏的要一个一个写-->
    <div class="row">
        <div class="col-lg-1 hidden-xs hidden-sm hidden-md"></div>
        <div class="col-lg-8 hidden-xs hidden-sm hidden-md ">
            <ul class="last1">
                <li><a href="#" class="ss">网站首页</a></li>
                <li><a href="#" class="ss">企业合作</a></li>
                <li><a href="#" class="ss">人才招聘</a></li>
                <li><a href="#" class="ss">联系我们</a></li>
                <li><a href="#" class="ss">讲师招聘</a></li>
                <li><a href="#" class="ss">常见问题</a></li>
                <li><a href="#" class="ss">意见反馈</a></li>
                <li><a href="#" class="ss">慕课大学</a></li>
                <li><a href="#" class="ss">友情连接</a></li>
            </ul>
            <p class="last3">
                Copyright © 2017 imooc.com All Rights Reserved | 川ICP备 13046642号-2
            </p>
        </div>
        <div class=" col-lg-3 hidden-xs hidden-sm hidden-md last2">
            <div class="as">
                <i class="fa fa-weixin fa-2x"></i>
            </div>
            <div class="as">
                <i class="fa fa-qq fa-2x"></i>
            </div>
            <div class="as">
                <i class="fa fa-weibo fa-2x"></i>
            </div>

        </div>

    </div>
</div>
</body>
</html>
 <script src="__JS__/jquery.min.js"></script>
 <script src="__JS__/bootstrap.min.js"></script>
<script >
    $("#files").on("change", function () {
        var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
        if (objUrl) {
//            alert(objUrl);
            $("#xmTanImg").attr("src", objUrl); //将图片路径存入src中，显示出图片
//            alert(objUrl);
        }else{
        }
        $('#xmTanImg').css('display', 'block');
    });
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
</script>

